<script setup lang="ts" name="Report">
import Editor from '@/views/components/editor/index.vue';
import MenuBar from '@/views/components/menuBar/index.vue';
import DictBook from './components/dict-book/index.vue'
import lodash from 'lodash'
import { getUrlParams,parseTime } from '@/utils/ruoyi'
import {sendTabMessage} from '@/utils/windowTool'
import {getStudy,saveStudy,getHistoryStudyByName} from '@/api/study'
import {getPrinterList} from '@/api/general'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
/*========================================>( 模板属性 )<========================================*/
//是否加载中
const loading = ref<boolean>(false)
//菜单栏名称
const menuBarTitle = ref<string>()
const menuBarMenus = ref<Array<any>>([
    {
        name:'返回列表',
        icon:'jump',
        mark:'tolist'
    }
])
//本患者历史报告
const reportHistoryList = ref<Array<any>>([])
const currentHistoryRow = ref<any>()
//报告是否编辑中
const editing = ref<boolean>(false)
//数据
const dataForm = ref<any>({})
const showPrinters = ref<boolean>(false)
const printerList = ref<Array<any>>([])
const usePrinterName = ref<string>()
//机构名称
const hospitalName = ref<string>()

/*========================================>( dom属性 )<========================================*/
const domHistoryTable = ref()

/*========================================>( 作用域属性 )<========================================*/
//异步IPC
const _ipcs = {
    sendPrinter() {
        window.$.send('REPORT-PRINT', { id: dataForm.value.id,pn: usePrinterName.value})
    },
    jumpTolist(){
        window.$.send('JUMP-LIST-PAGE')
    }
}

/*========================================>( 普通方法 )<========================================*/
//获取页面数据
const getData = () => {
    getStudy(getUrlParams(window.location.href).id).then((e:any)=>{
        dataForm.value = e.row
        hospitalName.value = e.hospitalName
        if(dataForm.value.report_time){
            dataForm.value.report_time = parseTime(new Date(),'{y}-{m}-{d}')
        }
        const {name,device} = dataForm.value
        menuBarTitle.value = `影像报告:${name}:${device.toUpperCase()}`
        getHistoryStudyByName(name).then((e:any)=>{
            reportHistoryList.value = e.rows
            if (e.rows.length) {
                domHistoryTable.value?.setCurrentRow(e.rows[0])
            }
        })
    })
}

/*========================================>( 监听方法 )<========================================*/
//监听点击历史报告
const handleReportChanged = (val: any) => {
    currentHistoryRow.value = val
}

//监听修改报告
const handleReportEdit = () => {
    editing.value = true
}

//监听保存报告
const handleReportSave = () => {
    dataForm.value.status = 1
    loading.value = true
    saveStudy(lodash.cloneDeep(dataForm.value)).then(()=>{
        loading.value = false
        proxy?.$modal.msgSuccess('保存成功')
        getData()
        sendTabMessage('LIST-NEED-REFRESH')
        editing.value = false
    })
}

//监听取消编辑报告
const handleEditCancel = () => {
    editing.value = false
    getData()
}

//监听打开报告打印预览
const handlePrintPreview = () => {
    getPrinterList().then((e:any)=>{
        printerList.value = e.list
        if(e.list.length){
            usePrinterName.value = e.list.name
        }
        showPrinters.value = true
    })
}

//监听执行打印，传输到后台进行打印
const handleDoPrint = () => {
    if(!usePrinterName.value){
        return
    }
    _ipcs.sendPrinter()
    let {id,printnum} = dataForm.value
    printnum ++
    saveStudy({id,printnum})
    showPrinters.value = false
}

//监听点击词典
const handleDictSelect = (e:any) => {
    if(!editing.value) return
    const {check_content,diagnose_content} = e
    let old_check_content = dataForm.value.check_content??''
    let old_diagnose_content = dataForm.value.diagnose_content??''
    dataForm.value.check_content = old_check_content + check_content
    dataForm.value.diagnose_content = old_diagnose_content + diagnose_content
}

//监听标题栏菜单点击
const handleMenuBarSelected = (mark:string) => {
    if(mark=='tolist'){
        _ipcs.jumpTolist()
    }
}

/*========================================>( 钩子 )<========================================*/
onMounted(() => {
    getData()
})
</script>
<template>
	<MenuBar :title="menuBarTitle" bar-color="#222" :menus="menuBarMenus" menus-on-right @select="handleMenuBarSelected" />
	<div class="main-content report">
		<div class="history">
			<div class="title">既往报告列表</div>
			<el-table ref="domHistoryTable" :data="reportHistoryList" highlight-current-row @current-change="handleReportChanged" height="250" border style="width:100%;cursor:pointer" table-layout="fixed">
				<el-table-column prop="name" label="姓名" width="100" align="center" />
				<el-table-column prop="gender" label="性别" width="55" align="center" />
				<el-table-column prop="age" label="年龄" width="60" align="center"> </el-table-column>
				<el-table-column prop="device" label="设备" width="70" align="center"> </el-table-column>
				<el-table-column prop="locate" label="部位" width="140" align="center"> </el-table-column>
				<el-table-column prop="date" label="检查时间" width="160" align="center"> </el-table-column>
			</el-table>
			<div class="title">检查所见：</div>
			<div class="checkContent viewContent" v-html="currentHistoryRow?.check_content ?? '无'" style="padding: 15px;overflow-y: auto"></div>
			<div class="title">诊断印象：</div>
			<div class="diagnoseContent viewContent" v-html="currentHistoryRow?.diagnose_content ?? '无'" style="padding: 15px;overflow-y: auto"></div>
		</div>
		<div class="content">
			<div class="page">
				<div class="title">
					{{ hospitalName??'未知机构名称' }}<br /><br />
					<span style="font-size:20px;font-weight: normal;">{{ dataForm.device?.toUpperCase() }}影像检查报告</span>
				</div>
				<div class="patientInfo">
					<el-row style="height: auto;">
						<el-col :span="3" class="font-bold">姓名:</el-col>
						<el-col :span="8">
							<span v-if="!editing">{{ dataForm.name }}</span>
							<el-input v-else v-model="dataForm.name" style="width:90%"></el-input>
						</el-col>
						<el-col :span="3" class="font-bold">性别:</el-col>
						<el-col :span="3">
							<span v-if="!editing">{{ dataForm.gender == 1 ? '男' : '女' }}</span>
							<el-select v-else v-model="dataForm.gender" style="width:90%">
								<el-option label="男" :value="1" />
								<el-option label="女" :value="0" />
							</el-select>
						</el-col>
						<el-col :span="3" class="font-bold">年龄:</el-col>
						<el-col :span="4" style="line-height:28px">
							<span v-if="!editing">{{ dataForm.age }}岁</span>
							<el-input type="number" v-else v-model="dataForm.age" style="width:90%"></el-input>
						</el-col>
					</el-row>
					<el-row style="height: auto; margin-top:5px;">
						<el-col :span="3" class="font-bold">部位:</el-col>
						<el-col :span="8">
							<span v-show="!editing">{{ dataForm.locate }}</span>
							<el-input v-show="editing" v-model="dataForm.locate" style="width:90%"></el-input>
						</el-col>
						<el-col :span="3" class="font-bold">时间:</el-col>
						<el-col :span="10" style="line-height:28px">
							<span v-if="!editing">{{ dataForm.date }}</span>
							<el-date-picker v-else v-model="dataForm.date" type="date" value-format="YYYY-MM-DD" placeholder="请选择影像时间" style="width:80%" />
						</el-col>
					</el-row>
				</div>
				<div class="checkInfo">
					<div class="label">检查所见：</div>
					<div v-show="!editing" class="preview checkContent" v-html="dataForm.check_content ?? '无内容'"></div>
					<div v-show="editing">
						<editor v-model="dataForm.check_content" height="20vh"> </editor>
					</div>
					<div class="label">诊断印象：</div>
					<div v-show="!editing" class="preview diagnoseContent" v-html="dataForm.diagnose_content ?? '无内容'"></div>
					<div v-show="editing">
						<editor v-model="dataForm.diagnose_content" height="20vh"> </editor>
					</div>
				</div>
				<div class="operate">
					<el-button v-if="!editing" type="primary" icon="Edit" @click="handleReportEdit">{{ dataForm.status == 1?'修改':'编写' }}</el-button>
					<el-button v-if="editing" type="warning" icon="ArrowLeftBold" @click="handleEditCancel">取消</el-button>
					<el-button :loading="loading" v-if="editing" type="danger" icon="Select" @click="handleReportSave">保存</el-button>
					<el-button :loading="loading" v-if="!editing&&dataForm.status == 1" icon="Printer" @click="handlePrintPreview">打印:{{ dataForm.printnum }}</el-button>
				</div>
				<div class="rptime">
					<div class="name">报告时间：</div>
					<div class="value">
						<div v-if="!editing">{{dataForm.report_time}}</div>
						<el-date-picker v-else v-model="dataForm.report_time" type="date" value-format="YYYY-MM-DD" placeholder="请选择报告时间" style="width:80%" />
					</div>
				</div>
			</div>
		</div>
		<div class="dict">
			<div class="title">报告词典</div>
			<DictBook v-if="dataForm.locate" :locate="dataForm.locate" :device="dataForm.device" @select="handleDictSelect" />
		</div>
		<el-dialog v-model="showPrinters" title="请选择打印机" width="500">
			<el-select v-model="usePrinterName" placeholder="选择打印机" style="width: 240px">
				<el-option v-for="item in printerList" :key="item.name" :label="item.name" :value="item.name" />
			</el-select>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="showPrinters = false">取消</el-button>
					<el-button type="primary" @click="handleDoPrint"> 确认打印 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="scss">
.main-content.report {
    height: calc(100vh - 40px);
    width: 100vw;
    background-color: #999;
    overflow: hidden;
    display: flex;
    flex-direction: row;

    .history {
        width: 350px;
        background-color: #3d3d3d;

        .title {
            width: 100%;
            height: 40px;
            text-indent: 1em;
            line-height: 40px;
            color: #fff;
        }

        .viewContent {
            width: 100%;
            height: 200px;
            background-color: #fff;
        }
    }

    .content {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .page {
            height: 90vh;
            width: 63vh;
            background-color: #fff;
            position: relative;

            .note {
                color: #666;
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }

            .applyOrderView {
                display: block;
                width: 90%;
                padding-top: 15px;
                margin: 0 auto;
            }

            .title {
                position: relative;
                width: 100%;
                height: 120px;
                padding-top: 40px;
                line-height: 20px;
                text-align: center;
                font-size: 25px;
                font-weight: bold;

                .erm {
                    position: absolute;
                    width: 90px;
                    height: 120px;

                    &.gzh_erm {
                        top: 10px;
                        left: 20px;
                    }

                    &.report_erm {
                        top: 10px;
                        right: 20px;
                    }

                    .pic {
                        width: 90px;
                        height: 90px;
                        background-position: center;
                        background-size: 100% 100%;
                    }

                    .note {
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        font-size: 13px;
                    }
                }
            }

            .patientInfo {
                width: 90%;
                margin: 8px auto;
                padding: 6px 0;
                font-size: 17px;
                border-top: solid 2px #000;
                border-bottom: solid 1px #000;
            }

            .checkInfo {
                width: 95%;
                margin: 0 auto;

                .label {
                    font-size: 17px;
                    // font-weight: bold;
                    padding: 10px;
                    text-indent: 5px;
                }

                .preview {
                    width: 95%;
                    margin: 0 auto;
                    //min-height: 220px;
                    //max-height: 220px;
                    overflow: auto;
                    // font-size: 20px;
                    height: 30vh;
                    color: #666;
                }
            }

            .operate{
                position: absolute;
                bottom: 5px;
                left:20px;
                width: 50%;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
            }

            .rptime{
                position: absolute;
                bottom: 5px;
                right:0;
                width: 40%;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                display:flex;
                .name{
                    width:80px;
                }
                .value{
                    flex:1;
                }
            }



        }
    }

    .dict {
        width: 350px;
        background-color: #3d3d3d;

        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            font-size: 18px;
        }
    }
}
</style>
<style lang="scss" scoped></style>
